<template>
  <div class="audioPlay2">
    <div class="top"></div>
    <!-- 唱片 -->
    <div class="changpian">
      <img
        src="../../assets/唱片.png"
        id="box"
        :class="{ paused: !isRotating }"
      />
    </div>
    <!-- 音乐名作者、收藏 -->
    <div class="title">
      <div class="title_left">
        <div class="name">夜曲</div>
        <div class="singer">陈雪凝</div>
      </div>
      <div class="title_right" @click="shouCang">
        <van-icon v-if="isShow" name="like-o" color="#000000" size="40" />
        <van-icon v-else name="like" color="#ff0000" size="40" badge="99+" />
      </div>
    </div>
    <!-- 音乐播放控制组件 -->
    <div class="bottom">
      <!-- 图标按钮 -->
      <div class="icon">
        <!-- 音效 -->
        <van-icon name="bar-chart-o" size="32" color="#8a8a8a" />
        <!-- 下载 -->
        <van-icon name="down" size="32" color="#8a8a8a" />
        <!-- 分享 -->
        <van-icon name="guide-o" size="32" color="#8a8a8a" />
        <!-- 评论 -->
        <van-icon name="comment-o" size="32" color="#8a8a8a" badge="99+" />
        <!-- 更多 -->
        <van-icon name="ellipsis" size="32" color="#8a8a8a" />
      </div>
      <!-- 播放进度条 -->
      <div class="slider">
        <van-slider v-model="process" @change="onChange" />
      </div>
      <!-- 时间 -->
      <div class="time">
        <!-- 获取当前播放时间且格式化 -->
        <div class="now">{{ time1 }}</div>
        <!-- 获取音乐总时长且格式化 -->
        <div class="end">{{ time2 }}</div>
      </div>
      <!-- 播放控制 -->
      <div class="control">
        <!-- 循环播放 -->
        <van-icon name="exchange" size="32" color="#8a8a8a" />
        <!-- 上一首 -->
        <van-icon name="arrow-left" size="32" color="#8a8a8a" @click="prevMusic"/>
        <!-- 播放 -->
        <div class="playMusic" @click="playMusic">
          <van-icon
            v-if="!isPlayer"
            name="play-circle-o"
            size="32"
            color="#8a8a8a"
          />
          <van-icon v-else name="pause-circle-o" size="32" color="#8a8a8a" />
        </div>
        <!-- 下一首 -->
        <van-icon name="arrow" size="32" color="#8a8a8a" @click="nextMusic" />
        <!-- 音量 -->
        <div class="volume" @click="isVolume">
          <van-icon name="volume-o" size="32" color="#8a8a8a" />
          <van-slider
            class="volume2"
            v-show="isShowVolume"
            v-model="volume1"
            @change="onvolumechange"
            :reverse="true"
            :vertical="true"
            active-color="#d2e7ff"
            inactive-color="#ffffff"
          >
            <template #button>
              <div class="custom-button">{{ volume1 }}</div>
            </template>
          </van-slider>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
let isShow = ref(true);
let process = ref(0);
let isPlayer = ref(false);
let isRotating = ref(false);
let volume1 = ref(100);
let isShowVolume = ref(false);
// 监听播放状态
const channel = new BroadcastChannel("audio_channel");
// 获取当前播放时间
let audio = document.querySelector("audio");
// 音乐音量初始化
audio.volume = 1;
// 监听播放时间
let time1;
//获取音乐总时长
let time2 = formatTime(audio.duration);
// 时间格式化
function formatTime(time) {
  let minutes = Math.floor(time / 60);
  let seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
}
// 收藏
function shouCang() {
  isShow.value = !isShow.value;
}
// 进度条
function onChange(value) {
  audio.currentTime = (value / 100) * audio.duration;
  if (isPlayer.value === false) {
    // 将音乐播放时间、音乐播放状态发送给其他页面
    channel.postMessage({ currentTime: audio.currentTime });
    channel.postMessage({ isPlayer: isPlayer.value });
    console.log("音乐详情页发送消息", audio.currentTime);
  }
}
// 播放与暂停
function playMusic() {
  isPlayer.value = !isPlayer.value;
  toggleRotation();
  // 将播放状态发送给其他页面
  channel.postMessage({ isPlayer: isPlayer.value });
  if (isPlayer.value === false) {
    console.log("音乐详情页控制暂停");
    console.log(audio.currentTime);
  }
  if (isPlayer.value === true) {
    console.log("音乐详情页控制播放");
    console.log(audio.currentTime);
  }
}
// 旋转事件
function toggleRotation() {
  // 打开项目后图标会自动旋转，需要将其暂停
  if (isRotating.value) {
    document.getElementById("box").classList.remove("paused");
  } else {
    document.getElementById("box").classList.add("paused");
  }
  isRotating.value = !isRotating.value;
}
// 弹出音量条
function isVolume() {
  isShowVolume.value = !isShowVolume.value;
}
// 音量
function onvolumechange() {
  audio.volume = volume1.value / 100;
  console.log("当前音量", audio.volume);
}
// 下一首
function nextMusic() {
  channel.postMessage({ next: true ,isPlayer: isPlayer.value});
  if (isPlayer.value === false) {
    isPlayer.value = true;
    toggleRotation();
  }
  console.log("音乐详情页发送下一首消息");
}
// 上一首
function prevMusic() {
  channel.postMessage({ next: false ,isPlayer: isPlayer.value});
  if (isPlayer.value === false) {
    isPlayer.value = true;
    toggleRotation();
  }
  console.log("音乐详情页发送上一首消息");
}
//每隔20ms调用一次，获取当前播放时间
setInterval(() => {
  time1 = formatTime(audio.currentTime);
  process.value = (audio.currentTime / audio.duration) * 100;
}, 20);

onMounted(() => {
  console.log("音乐详情页加载完成");
  // 监听播放状态
  channel.onmessage = (event) => {
    console.log("音乐详情页收到消息", event.data);
    if (event.data.isPlayer == true) {
      isPlayer.value = true;
      isRotating.value = true;
      console.log("音乐详情页监听播放");
    }
    if (event.data.isPlayer == false) {
      isPlayer.value = false;
      isRotating.value = false;
      console.log("音乐详情页监听暂停");
    }
  };
  console.log("音乐详情页加载完成");
});
</script>
<style scoped>
.audioPlay2 {
  width: 100%;
  height: 100%;
  background-color: #f0f8ff;
}
.top {
  width: 90%;
  height: 8%;
}
.changpian {
  width: 80%;
  margin: auto;
  background-color: white;
  border-radius: 5%;
  /* 阴影 */
  box-shadow: 0px 0px 10px 5px #cfcfcf;
}
.changpian img {
  width: 88%;
  margin-left: 6%;
}
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5%;
}
.title_left {
  width: 50%;
  height: 100%;
  margin-left: 10%;
}
.title_left .name {
  font-size: 30px;
  font-weight: 600;
}
.title_left .singer {
  font-size: 15px;
  color: #8a8a8a;
}
.title_right {
  width: 50%;
  text-align: right;
  margin-right: 10%;
}
.bottom {
  width: 80%;
  height: 22%;
  margin: 40% 10% 0 10%;
}
.bottom .icon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10%;
}
.bottom .slider {
  width: 100%;
}
.bottom .time {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5%;
}
.bottom .control {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5%;
}
.volume .volume2 {
  position: absolute;
  top: 10.5%;
  right: 2.5%;
  width: 1rem;
  height: 15rem;
}
.volume2 .custom-button {
  width: 20px;
  color: #ffffff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: var(--van-primary-color);
  border-radius: 100px;
}
/* 唱片旋转 */
#box {
  animation: rotateAnimation 4s infinite linear;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#box.paused {
  animation-play-state: paused;
}
</style>
